import { Card } from 'antd';
import React from 'react';
import Header from './components/Header';
import Panel from './components/Panel/Panel';
import Statistics from './components/Statistics';
import { SwitchThemeURL } from './RequestURL';

export enum ThemeType
{
    DefaultTheme = 'DefaultTheme',
    DarkTheme = 'DarkTheme'
}
export const SwitchTheme = async (theme: ThemeType) =>
{
    const head = document.querySelector("head");

    let links = document.getElementsByTagName('style');
    for (let l of Array.from(links))
    {
        if (l.getAttribute('data-type') === 'theme')
        {
            l.remove();
        }
    }
    let content = await (await fetch(SwitchThemeURL, {
        method: "POST",
        headers: {
            'content-type': "application/json;charset=utf-8",
        },
        body: JSON.stringify({ theme })
    })).text();
    const style = document.createElement("style");
    style.dataset.type = 'theme';
    style.innerHTML = content;
    head?.appendChild(style);
};

export default function App()
{
    return (
        <Card className='App'>
            <Header />
            <Statistics />
            <Panel />
        </Card>
    );
}
